<template>
  <!--！！快递员管理- 作业范围分配！！ -->
  <div class="branches">
    <div class="app-container">
      <div class="background">
        <!-- 上 -->
        <div class="top">
          <div class="txt">作业范围分配</div>
          <el-button
            v-if="!isEdit"
            type="primary"
            medium
            @click="isEdit = true"
          >编辑</el-button>
          <!--  -->
          <div v-else>
            <el-button
              type="primary"
              medium
              @click="isEdit = false"
            >确定</el-button>
            <el-button medium @click="isEdit = false">取消</el-button>
          </div>
        </div>
        <div class="buttom">
          <div style="margin-top: 20px; margin-bottom: 20px">
            <span style="font-size: 20px">地区关键词：</span>
            <el-input
              v-model="place"
              medium
              placeholder="请输入地区关键词"
              type="text"
              style="width: 250px; margin: 10px"
            />
          </div>

          <el-button
            v-if="isEdit && !showEdit"
            style="margin-bottom: 15px"
            type="primary"
            medium
            @click="drawingStart"
          >开始绘制</el-button>

          <div v-if="showEdit && isEdit" style="margin-bottom: 15px">
            <el-button
              type="primary"
              medium
              @click="showEdit = false"
            >完成绘制</el-button>
            <el-button medium @click="showEdit = false">删除绘制</el-button>
          </div>

          <el-alert
            v-if="isEdit"
            type="warning"
            description=" 点击或拖动鼠标绘制电子围栏，右击鼠标结束图形绘制，图形不可有交叉点。完成绘制后，点击提交按钮保存。仅支持绘制单个电子围栏区域"
            show-icon
            :closable="false"
          />

          <el-alert
            v-if="!isEdit"
            center
            type="warning"
            :description="description"
            show-icon
            :closable="false"
          />
          <div>
            <!-- 地图 -->
            <baidu-map
              class="map"
              :center="center"
              :zoom="zoom"
              scroll-wheel-zoom
            >
              <bm-polygon
                :path="polygon"
                stroke-color="blue"
                :stroke-opacity="1"
                :stroke-weight="10"
                :editing="true"
                @lineupdate="updatePolygonPath"
              />
            </baidu-map>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getScope } from '@/api/courier'

export default {
  data() {
    return {
      editing: false,
      isEdit: false, // 编辑
      showEdit: false, // 进行编辑
      center: { lng: 0, lat: 0 },
      polygon: [
        { longitude: 108.906866, latitude: 34.162109 },
        { longitude: 108.888425, latitude: 34.180016 },
        { longitude: 108.912572, latitude: 34.188377 },
        { longitude: 108.959427, latitude: 34.182644 },
        { longitude: 108.96029, latitude: 34.153014 },
        { longitude: 108.906866, latitude: 34.162109 }],
      zoom: 30,
      place: '',
      description: `当前${this.$route.params.name}下暂无作业范围`
    }
  },
  created() {
    this.getScope()
  },
  methods: {
    async getScope() {
      const res = await getScope(this.$route.params.id, this.$route.params.type)
      console.log(res)
      this.center.lng = res.data.longitude
      this.center.lat = res.data.latitude
      this.polygon = res.data.polygon
    },
    handler({ BMap, map }) {
      console.log(BMap, map)
      this.center.lng = 116.404
      this.center.lat = 39.915
      this.zoom = 15
    },
    // 开始绘制
    drawingStart() {
      this.showEdit = true
      this.editing = true
      console.log(this.editing)
    },
    updatePolygonPath(e) {
      this.polylinePath = e.target.getPath()
    }
  }
}
</script>

  <style scoped>
.branches {
  margin-left: 20px;
  margin-right: 20px;
}
.background {
  background: #ffffff;
  margin-top: 15px;
  height: 720px;
  padding: 20px;
}
.top {
  height: 70px;
  background-color: #f7f7f7e8;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.txt {
  font-size: 24px;
  font-weight: 700;
}
.map {
  margin-top: 20px;
  width: 1296px;
  height: 500px;
}
</style>

